<template>
	<view class="userInfo">
		<title :center="false" @titleHeight='setPaddingTop' title="个人资料" icon="icon" iconSize="38" color="#000000"
		bgcolor="#ffffff" :bold="false" @toclick="toBack()"></title>
		<view class="content" :style="{'margin-top':contentMarginTop + 'px','height':`calc(100vh - ${contentMarginTop}px)`}">
			<view class="box">
				<button class="avatar item" open-type="chooseAvatar" @chooseavatar="chooseAvatar">
					<view class="left">
						头像
					</view>
					<view class="right">
						<image :src="userInfo.avatar" mode="" style="width: 88rpx;height: 88rpx;border-radius: 50%;"></image>
						<u-icon name="arrow-right" color="#86909C" size="28" class="icon"></u-icon>
					</view>
				</button>
				<view class="nickname item" @tap="toEditNickname">
					<view class="left">
						昵称
					</view>
					<view class="right">
						<view class="text">
							{{userInfo.name}}
						</view>
						<u-icon name="arrow-right" color="#86909C" size="28" class="icon"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import title from '@/pages/components/title.vue'
	export default {
		data() {
			return {
				contentMarginTop:93,
				userInfo:{}
			}
		},
		components:{
			title,
		},
		onShow() {
			this.userInfo = Object.assign({},this.$store.state.uInfo || (uni.getStorageInfoSync('uInfo')&&JSON.parse(uni.getStorageInfoSync('uInfo'))))
		},
		methods: {
			setPaddingTop(data){
				// console.log(data);
				this.contentMarginTop = data.height
			},
			toBack(){
				this.$common.toBack(1)
			},
			chooseAvatar(e){
				this.amendUserInfo({avatarUrl:e.target.avatarUrl})
			},
			toEditNickname(){
				uni.navigateTo({
					url:'/subpages/userInfo/editNickname'
				})
			},
			// 更新资料
			amendUserInfo(data = {}) {
				this.$api.updateUserInfo({
					userinfo: JSON.stringify(data)
				}).then(res => {
					this.$store.commit('setUserInfo', res.data.data)
					uni.setStorageSync('uInfo', JSON.stringify(this.$store.state.uInfo))
				})
			},
		},
		watch:{
			'$store.state.uInfo':{
				handler(v){
					this.userInfo = v
				}
			}
		}
	}
</script>

<style lang="less" scoped>
.userInfo {
	height: 100%;
	width: 100%;
	>.content {
		height: 100%;
		background-color: #F4F4F4;
		padding: 20rpx;
		>.box {
			background: #FFFFFF;
			border-radius: 12rpx;
			padding: 0 20rpx;
			>.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 96rpx;
				>.left {
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #1D2129;
				}
				>.right {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					>.icon {
						margin-left: 20rpx;
					}
				}
				&:nth-child(n+2){
					border-top: 1rpx solid rgba(221,221,221,0.8);
				}
			}
			.avatar {
				background-color: transparent;
				color:transparent;
				padding: 0;
				margin: 0;
				/deep/.icon {
					margin-left: 20rpx;
				}
				&::after{
					border: none;
				}
			}
		}
	}
}
</style>
